<template>
	<view>
		<view class="u-flex user-box u-p-l-80 u-p-r-20 u-p-b-30"  style="background-color: #0C52C4;">
			<view class="u-m-r-30">
				<u-avatar :src="pic" size="100"></u-avatar>
			</view>
			<view class="u-flex-1">
				<view class="u-font-18 u-p-b-20" style="color: #FFFFFF;font-weight: bold;">{{ tem }}℃</view>
			</view>
		</view>
		<view class="u-flex user-box u-p-l-80 u-p-r-20"  style="background-color: #0C52C4;">
			<view class="loginType">
				<view class="wechat itemWeather" style="width: 40%; text-align: left;">
					<view class="icon">
						<u-avatar :src="todayW" size="35" style="vertical-align: middle;"></u-avatar><text style="padding-left: 5px;">{{win}}{{win_speed}}</text>
					</view>
				</view>
				<view class="QQ itemWeather" style="width: 30%; text-align: center;">
					<view class="icon">
						<u-avatar :src="todayH" size="35" style="vertical-align: middle;"></u-avatar><text style="padding-left: 5px;">{{humidity}}</text>
					</view>
				</view>
				<view class="QQ itemWeather" style="width: 30%; text-align: center;">
					<view class="icon">
						<u-avatar :src="todayAQI" size="35" style="vertical-align: middle;"></u-avatar><text style="padding-left: 5px;">空气 {{air_level}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="u-m-t-20">
			<u-notice-bar :autoplay="autoplay" :playState="playState" :speed="speed" @getMore="getMore"
			:mode="mode"  @click="click" :show="show" :type="type" :list="list" style="background-color: #FFFFFF;"
			:moreIcon="moreIcon" :volumeIcon="volumeIcon" :duration="duration" :isCircular="isCircular"></u-notice-bar>
		</view>
		<view class="u-m-t-20">
			<u-grid :col="4">
				<u-grid-item @click="openPage('/pages/water/WaterInfo/index')">
					<text class="u-iconfont uicon-heart" style="font-size:24px;color:#DA4139"></text>
					<!-- <u-icon name="photo" :size="46" color="#DA4139"></u-icon> -->
					<view class="grid-text">水情</view>
				</u-grid-item>
				<u-grid-item @click="openPage('/pages/water/RainInfo/index')">
					<text class="u-iconfont uicon-map" style="font-size:24px;color:#E85EAF"></text>
					<!-- <u-icon name="lock" :size="46" color="#E85EAF"></u-icon> -->
					<view class="grid-text">雨情</view>
				</u-grid-item>
				<u-grid-item @click="openPage('/pages/water/gqInfo/index')">
					<text class="u-iconfont uicon-volume" style="font-size:24px;color:#60B2F8"></text>
					<view class="grid-text">工情</view>
				</u-grid-item>
				<u-grid-item @click="openPage('/pages/waterVolume/index')">
					<u-icon name="list" :size="46" color="#5C80D3"></u-icon>
					<view class="grid-text">南排水量</view>
				</u-grid-item>
				<u-grid-item @click="openPage('/pages/weather/jyyb/index')">
					<u-icon name="moments" :size="46" color="#51B760"></u-icon>
					<view class="grid-text">降雨预报</view>
				</u-grid-item>
				<u-grid-item @click="openPage('/pages/weather/cloud/index')">
					<u-icon name="photo" :size="46" color="#5C80D3"></u-icon>
					<view class="grid-text">卫星云图</view>
				</u-grid-item>
				<u-grid-item @click="openPage('/pages/weather/radar/index')">
					<u-icon name="eye" :size="46" color="#DA4139"></u-icon>
					<view class="grid-text">雷达图</view>
				</u-grid-item>
				<u-grid-item @click="openPage('/pages/weather/typhoon/index')">
					<u-icon name="chrome-circle-fill" :size="46" color="#5DC3C7"></u-icon>
					<view class="grid-text">台风路径</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="item">
			<u-section title="嘉兴实时水情" class="mySection" :color="color" :bold="false" :show-line="showLine" :right="false"></u-section>
			<view>
				<WaterRecord @myClick="myClick" :newlist="newlist"></WaterRecord>
			</view>			
		</view>

	</view>
</template>

<script>
	import WaterRecord from '@/components/water/WaterInfo/index.vue';
	import { getWaterInfo } from '../water/api/api.js'
	import { getWeatherInfo } from './api.js'
	export default {
		data() {
			return {
				tem:"",
				win:"",
				win_speed:"",
				air_level:"优",
				humidity:"",
				pic:'',
				todayW:"../../static/icon/icon1.png",
				todayH:"../../static/icon/icon2.png",
				todayAQI:"../../static/icon/icon3.png",
				color:'#0C52C4',
				list: [],
				listWeather:[],
				show: true,
				autoplay: false,
				type: 'none',
				mode: 'vertical',
				playState: 'play',
				speed: 160,
				duration: 2000,
				moreIcon: true,
				volumeIcon: true,
				isCircular: true,
				current: 0,
				showLine:true,
				newlist:[]
				
			}
		},
		components: {
			WaterRecord
		},
		onLoad() {
			this.search()
			this.queryWeatherData()
		},
		methods: {
			myClick(stcd,stnm) {
				//跳转到页面
				uni.navigateTo({
					url: '../water/waterDZ?stcd=' + stcd+'&stnm='+stnm
				})
			},
			getMore() {
				this.toast(`点击了更多图标`);
			},
			toast(title) {
				this.$refs.uToast.show({
					title: title,
					type: 'warning'
				})
			},
			openPage(path) {
				uni.navigateTo({
					url: path
				})
			},
			search() {
				//嘉兴实时水情
				var _data = {
					STIME: new Date(new Date().addDate("d",-1)).Format("YYYY-MM-DD hh:mm:ss"),
					ETIME: new Date(new Date().addDate("d",1)).Format("YYYY-MM-DD hh:mm:ss"),
					TREEID: "2020111911490888935"
				};
				var _param = {}
				_param.data = _data;
				getWaterInfo(_param).then(res =>{
					this.newlist = res.data;
				})
				
				var _dataWeather = {
					PageIndex: 0,
					PageSize: 2,
					TBA_INFOTYPE: "天气预警信息"
				}
				getWeatherInfo({data:_dataWeather}).then(res =>{
					this.listWeather = res.data;
					this.list = []
					for(var i = 0;i< this.listWeather.length ;i++){
						this.list.push(this.listWeather[i].TBA_FILENAME);
					}
				})
			},
			queryWeatherData(){
				
				var _data = {
					PageIndex: 0,
					PageSize: 1,
					TBA_INFOTYPE: "天气信息"
				}
				getWeatherInfo({data:_data}).then(res =>{
					var item = {};
					var resultInfo = undefined != res.data[0].TBA_NOTE ? JSON.parse(res.data[0].TBA_NOTE) : [];
					for(var i = 0;i< resultInfo.length ;i++){
						var type = resultInfo[i].type;
						if(type=="DryBulTemp"){
							this.tem = resultInfo[i].value;
						}else if(type=="RelHumidity"){
							this.humidity = resultInfo[i].value;
						}else if(type=="pub_PM25_Level"){
							this.air_level = resultInfo[i].value;
						}else if(type=="pub_wwIcon"){
							this.pic = "http://smart.zj121.com/"+resultInfo[i].value;
						}else if(type=="pub_WindDV"){
							this.win_speed = resultInfo[i].value;
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	page{
		background-color: #ededed;
	}
	
	.mySection{
		height: 60rpx;
		line-height: 60rpx;
		padding-left: 20rpx;
	}
	
	.item {
		background-color: #FFFFFF;
		margin: 30rpx 0;
		margin-top: 20rpx;
		
		&:first-child {
			margin-top: 0;
		}
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.title {
			font-size: 30rpx;
			position: relative;
			line-height: 1;
			padding-left: 22rpx;
			
			&:before {
				width: 4px;
				height: 15px;
				border-radius: 100rpx;
				background-color: $u-content-color;
				content: '';
				position: absolute;
				left: 6rpx;
				top: -1px;
			}
		}
		
		.color-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #fff;
			text-align: center;
			margin-top: 20rpx;
			
			.color-item {
				display: flex;
				flex: 1;
				margin: 0 8rpx;
				flex-direction: column;
				border-radius: 6rpx;
				padding: 12rpx 0;
			}
			
			
			.color-title {
				font-size: 28rpx;
			}
			
			.color-value {
				font-size: 24rpx;
			}
		}
	}
	
	.loginType {
		display: flex;
		justify-content:space-between;
		width: 100%;
		margin: 0 0 25rpx 0;
		color: #FFFFFF;
		
		.itemWeather {
			width: 33%;
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #FFFFFF;
			font-size: 28rpx;
		}
	}
	
</style>
